/* shipment-record.less */

/* 定义设计变量 */
page {
  --theme-color: #19be6b;
  --theme-color-dark: #18b566;
  --danger-color: #f56c6c;
  --warning-color: #f9ae3d;

  --main-text-color: #303133;
  --regular-text-color: #606266;
  --secondary-text-color: #909399;
  --placeholder-text-color: #c0c4cc;

  --font-size-lg: 28rpx;
  --font-size-md: 26rpx;
  --font-size-sm: 24rpx;
  --font-size-xs: 22rpx;

  background-color: #f7f8fa;
}

/* 页面容器 */
.page-container {
  padding: 24rpx;
  box-sizing: border-box;
}

/* 加载动画 */
@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 记录卡片 */
.record-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx 30rpx;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  position: relative;
  opacity: 0; // 动画初始状态
  animation: card-fade-in 0.4s ease-out forwards;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .header-left {
    .order-id {
      font-size: var(--font-size-md);
      color: var(--main-text-color);
      font-weight: bold;
      margin-bottom: 16rpx;
    }
    .info-line {
      display: flex;
      align-items: center;
      font-size: var(--font-size-sm);
      color: var(--regular-text-color);
      &:not(:last-child) {
        margin-bottom: 8rpx;
      }
      .info-label {
        color: var(--secondary-text-color);
        margin-right: 10rpx;
      }
      .shipper-name {
        color: var(--main-text-color);
      }
    }
  }

  .header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .participant-count {
      font-size: var(--font-size-xs);
      color: var(--secondary-text-color);
      margin-top: 8rpx;
    }
  }
}

/* 卡片主体（出货详情） */
.card-body {
  padding: 20rpx 0;
  .detail-header, .detail-row {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
  }

  .detail-header {
    color: var(--secondary-text-color);
    margin-bottom: 12rpx;
  }

  .detail-row {
    color: var(--regular-text-color);
    padding: 8rpx 0;
  }

  .col {
    text-align: right;
    &.col-name {
      flex: 2;
      text-align: left;
      color: var(--main-text-color);
    }
    &.col-price {
      flex: 1.5;
    }
    &.col-value {
      flex: 1.5;
    }
    &.col-total {
      flex: 1.5;
      font-weight: 500;
      &.price {
        color: var(--warning-color);
      }
    }
  }
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;

  .shipment-time {
    font-size: var(--font-size-xs);
    color: var(--secondary-text-color);
  }

  .total-amount {
    font-size: var(--font-size-sm);
    color: var(--regular-text-color);
    font-weight: bold;
    .amount-value {
      font-size: var(--font-size-lg);
      color: var(--theme-color);
      margin-left: 10rpx;
    }
  }
}

/* 备注与图片区域 */
.card-extra {
  padding-top: 20rpx;

  .remark-section {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    background-color: #f9f9f9;
    padding: 16rpx;
    border-radius: 8rpx;

    .remark-label {
      color: var(--secondary-text-color);
    }
    .remark-content {
      color: var(--regular-text-color);
    }
  }

  .image-section {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .image-item {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* 加载与空状态 */
.loading-container, .empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
  color: var(--secondary-text-color);
}
.loading-text {
  font-size: var(--font-size-md);
}
.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: var(--font-size-md);
}

